<template>
  <div class="index">
    <div class="header">
      <h1>湖北省安全生产网络培训系统</h1>
      <router-link to="login">登录</router-link>
    </div>
    <div class="banner">
      <img src="../../assets/images/banner.png" />
    </div>
    <div class="train_div" @click="toSearchSign">
      <h3>
        <span></span>报名查询
      </h3>
      <span>
        <img src="../../assets/images/search_icon.png" width="24px" height="24px" />
      </span>
    </div>
    <div class="train_div">
      <h3>
        <span></span>专题培训班
      </h3>
      <router-link to="allTrain">
        <img src="../../assets/images/all_icon.png" />查看全部
      </router-link>
    </div>

    <div class="type">
      <label>分类:</label>
      <ul class="typeListd">
        <li v-for="(item,index) in typeList1"
            :key="index"
            :class="{'active': activeName == item.typeName}"
            @click="chooseUserType(item)">{{item.typeName}}</li>
      </ul>
      <span class="showMore" :class="{'hideMore': toggle}" @click="showMore"></span>
      <ul class="typeList2" v-if="toggle">
        <li v-for="(item,index) in typeList2"
            :key="index"
            :class="{'active': activeName == item.typeName}"
            @click="chooseUserType(item)">{{item.typeName}}</li>
      </ul>
    </div>

    <div class="curse_box">
      <ul class="curse_list">
        <li v-for="(item, index) in trainClassList" :key="index" class="curse_item">
          <img :src="item.trainClassImg" />
          <div class="item_right">
            <h4>{{item.trainClassName}}</h4>
            <p>报名时间:{{item.applyStartDate.substr(0,10)}}至{{item.applyEndDate.substr(0,10)}}</p>
            <div class="btnBox">
              <router-link :to="{name:'unitStudent',query:{id:item.id}}"
                           class="baoBtn"
                           v-if="item.isEnterprise">我要报名</router-link>
              <router-link :to="{name:'emergencyStudent',query:{id:item.id}}"
                           class="baoBtn"
                           v-if="!item.isEnterprise">我要报名</router-link>
              <router-link :to="{name:'trainDetail',query:{id:item.id}}" class="detailBtn">查看详情</router-link>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {} from "vux";
import { getUserType, getVisitorIndex } from "@/api/index";
export default {
  name: "index",
  components: {},
  data() {
    return {
      trainClassList: [],
      typeList1: [],
      typeList2: [],
      activeName: "全部",
      toggle: false,
      listQuery: {
        userType: "-1"
      }
    };
  },
  created() {
    this.$vux.loading.show({
      text: "Loading"
    });
    getUserType().then(response => {
      if (response.length >= 4) {
        this.typeList1 = [{ typeName: "全部" }].concat(response.slice(0, 3));
        this.typeList2 = response.slice(3);
      } else {
        this.typeList1 = response;
        this.typeList2 = [];
      }
      this.$vux.loading.hide();
      this.fetchData();
    });
  },
  methods: {
    showMore: function() {
      this.toggle = !this.toggle;
    },
    chooseUserType(item) {
      this.activeName = item.typeName;
      this.listQuery.userType = item.id;
      this.fetchData();
    },
    fetchData() {
      this.$vux.loading.show({
        text: "Loading"
      });
      getVisitorIndex(this.listQuery).then(response => {
        this.trainClassList = response.trainClassList;
        this.$vux.loading.hide();
      });
    },
    toSearchSign() {
      this.$router.push({
        path: '/searchSign'
      })
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
  background: #ebeef2;
}

.header {
  height: 55px;
  background: #2269ff;
  color: #fff;
  padding: 0 15px;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  font-size: 18px;
  font-weight: bold;
}

.header a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  display: block;
  width: 70px;
  height: 33px;
  border-radius: 5px;
  border: 1px solid #fff;
  text-align: center;
  line-height: 33px;
}

.header a:active {
  opacity: 0.8;
}

.banner {
  padding: 5px 15px 2px;
}

.banner img {
  width: 100%;
}

.train_div {
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 15px;
  margin-bottom: 5px;
}

.train_div h3 {
  font-size: 16px;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.train_div h3 span {
  height: 16px;
  width: 4px;
  border-radius: 2px;
  display: block;
  background: #2269ff;
  margin-right: 5px;
}

.train_div a {
  text-decoration: none;
  color: #999;
  font-size: 12px;
}

.train_div a img {
  height: 9px;
  width: 9px;
  margin-right: 5px;
}

.type {
  background: #fff;
  margin-bottom: 5px;
  height: 50px;
  display: flex;
  box-sizing: border-box;
  padding: 0 15px;
  align-items: center;
  position: relative;
  justify-content: space-between;
}

.type label {
  display: block;
  color: #fe6000;
  font-weight: bold;
  font-size: 14px;
  width: 45px;
  text-align: left;
}

.showMore {
  display: block;
  height: 20px;
  width: 20px;
  background: url("../../assets/images/show_more.png") center center no-repeat;
  background-size: 12px 7px;
  margin-left: 5px;
  transform: rotate(0deg);
  transition: 0.3s;
}

.showMore.hideMore {
  transform: rotate(180deg);
  transition: 0.3s;
}

.typeListd {
  display: flex;
  width: calc(100% - 70px);
  justify-content: space-between;
}

ul,
ul li {
  list-style: none;
  font-size: 14px;
}

.typeListd li.active {
  font-weight: bold;
  color: #2269ff;
}

.typeList2 {
  background: #fff;
  position: absolute;
  top: 50px;
  left: 0;
  padding: 5px 15px;
  box-sizing: border-box;
  width: 100%;
  border-top: 1px solid #efeff4;
  box-shadow: 0 2px 12px -2px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: auto;
}

.typeList2 li {
  float: left;
  margin: 5px;
  width: calc(25% - 10px);
  height: 32px;
  border: 1px solid #eee;
  text-align: center;
  line-height: 32px;
  color: #999;
  box-sizing: border-box;
}

.typeList2 li.active {
  color: #2269ff;
  border-color: #2269ff;
}

.curse_box {
  padding: 15px;
  background: #fff;
}

.curse_list {
  padding-top: 10px;
}

.curse_list li:last-child {
  margin-bottom: 0;
}

.curse_item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  height: 90px;
}

.curse_item img {
  width: 135px;
  height: 90px;
}

.item_right {
  margin-left: 10px;
  width: calc(100% - 145px);
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding:5px 0;
}

.item_right h4 {
  text-align: left;
  font-size: 15px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  /* margin-bottom: 6px;
  margin-top:3px; */
  
}

.item_right p {
  background: url("../../assets/images/time_icon.png") left center no-repeat;
  background-size: 11px 11px;
  padding-left: 13px;
  color: #999;
  font-size: 12px;
  text-align: left;
}

.btnBox {
  text-align: left;
  /* margin-top: 18px; */
  height: 25px;
  display: flex;
}

.btnBox a {
  display: inline-block;
  width: 65px;
  height: 25px;
  text-decoration: none;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
  border-radius: 5px;
  box-sizing: border-box;
}

.baoBtn {
  background: #2269ff;
  color: #fff;
}

.detailBtn {
  border: 1px solid #2269ff;
  color: #2269ff;
  margin-left: 12px;
}
</style>
